<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator>
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    订单详情
                </el-breadcrumb-item>
                <el-button type="primary" @click="goBack" style="float:right">返回</el-button>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="16" class="border-left">
                    <div>
                        <span class="card-title">订单信息</span>
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="订单编号：">xxxx</el-form-item>
                            <el-form-item label="支付方式：">xxxx</el-form-item>
                            <el-form-item label="买家：">xxxx</el-form-item>
                            <el-form-item label="配送方式：">xxxx</el-form-item>
                            <el-form-item label="收货人：">xxxx</el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="用户名称：">xxxx</el-form-item>
                            <el-form-item label="手机号码：">xxxx</el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <span class="card-title">商品信息</span>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="商品标题" align="center"></el-table-column>
                <el-table-column prop="date" label="商品ID" align="center"></el-table-column>
                <el-table-column prop="date" label="单价" align="center"></el-table-column>
                <el-table-column prop="date" label="数量" align="center"></el-table-column>
                <el-table-column prop="date" label="备注" align="center"></el-table-column>
                <el-table-column prop="date" label="订单状态" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-truck"
                            @click="handleEdit(scope.$index, scope.row)"
                        >物流信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Settlement">
                <div>
                    <p>
                        需付金额：
                        <span>xxx</span>
                    </p>
                    <p>
                        运费：
                        <span>xxx</span>
                    </p>
                    <p>
                        订单金额：
                        <span>xxx</span>
                    </p>
                    <p>
                        实付款：
                        <span>xxx</span>
                    </p>
                </div>
            </div>
            <el-divider></el-divider>
            <span class="card-title">评价详情</span>
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="IP地址:">xxxx</el-form-item>
                <el-form-item label="评论时间:">xxxx</el-form-item>
                <el-form-item label="评价星数:">xxxx</el-form-item>
                <el-form-item label="评价内容:">xxxx</el-form-item>
                <el-form-item label="评价图片:">
                    <div class="imgbox">
                        <el-image :src="form.src1"></el-image>
                        <el-image :src="form.src2"></el-image>
                    </div>
                </el-form-item>
                <el-form-item style="margin-top:18px">
                    <el-button type="primary" @click="delEvaluation">删除评价</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  name: 'orderDetails',
  data() {
    return {
      form: {
        src1: 'http://img0.imgtn.bdimg.com/it/u=2550672580,652489622&fm=15&gp=0.jpg',
        src2: 'http://img4.imgtn.bdimg.com/it/u=3633253070,927493032&fm=15&gp=0.jpg'
      },
      tableData: [
        {
          date: '545'
        },
        {
          date: '545'
        },
        {
          date: '545'
        },
      ]
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 删除评价
    delEvaluation() { }
  }

}
</script>

<style scoped>
.card-title {
    margin-bottom: 15px;
    display: block;
}
.border-left {
    border-right: 1px solid #ccc;
}
.el-form-item {
    margin-bottom: 0;
}
.Settlement {
    text-align: right;
    padding: 20px 0;
}
.Settlement p {
    line-height: 40px;
    color: #999;
    font-size: 14px;
}
.Settlement span {
    margin-left: 30px;
    display: inline-block;
    text-align: right;
}
.imgbox {
    display: flex;
}
.imgbox div {
    margin-right: 10px;
    width: 200px;
}
</style>